<template>
<!-- :class="[page=='1'?'foot1':page=='2'?menukey=='1'?'foot2':'foot2_1':page=='3'?'foot3':page=='4'?'foot4':page=='5'?'foot5':page=='6'?'foot6':page=='7'?'foot7':'foot8']" -->
    <div class="foot" >
      <div class="foot-content" >
          <div class="foot-left-content">
           <!-- <div><img  class="foot-red-img" src="@/assets/red.png" @click="onBanner(webinfoData.urlDzjgbs)" /></div> -->
           <div class="foot-left-content-text">
             <p>主办：{{webinfoData.zhuban}}</p>
             <p>政府网站标识码：{{webinfoData.idZfwz}}<span style="margin-left:15px;">{{webinfoData.icpBeianxuhao}}</span> 
             <span  class="ba-span" @click="onBanner(webinfoData.urlGajgba)"><img style="width:9px;height:10px; margin-top:-2px;margin-left:10px;" :src="webinfoData.pics" /><span style="margin-left:5px;">{{webinfoData.idGajg}}</span></span>
             </p>
             <p>{{webinfoData.allrightres}}<span style="margin-left:10px;"></span>中文域名：  {{webinfoData.chineseDomain}} </p>
           </div>
          </div>   
          <div class="foot-right-content">
             <img class="foot-jiucuo-img" src="@/assets/jiucuo.png"/>
          </div>  
      </div>
    </div>
</template>

<script>
import api from '@/api/index'
  export default {
    name: "footerpage",
    props: {
      page: {
        type: String,
        default: '1'
      },
      menukey:{
        type:String,
        default:'1'
      }

    },
    data() {
      return {
        imgPath:this.$globalConfig.adressPath,
        webinfoData:{
          // zhuban: "海南省水务厅建设管理处",
          // idZfwz: "4600000049",
          // icpBeianxuhao: "琼ICP备05000041",
          // idGajg: "琼公网安备46010802000004号",
          // allrightres: "版权所有@海南省水务厅",
          // chineseDomain: "海南省水务厅.政务",
          // pics: require('@/assets/icon_5.png'),
        },
      }
    },
    created(){
      this.get_webinfo();
    },
    methods: {
       get_webinfo(){
        let param = {
          isPass:true,
        }
        api.get_foot_webinfo(param).then(res => {
          let data = res.rows;
          if(data.length>0){
            data[0].pics =this.imgPath + JSON.parse(data[0].pics)[0].path
            this.webinfoData = data[0]
          }
        });
          
        
      },
     onBanner(url){
        window.open(url);
     },
    }
  };
</script>
<style lang="less">、
.white-space {
  white-space:pre;
}

.foot{
  width:100%;
  min-width:1240px;
  max-width:100%;
  height: 120px;
  position: absolute;
  margin-top: 10px;
  background: #347CD8;
  margin-bottom: 5px;
}
.foot1{
  margin-top: 1185px;
}
.foot2{
  margin-top: 930px;
}
.foot2_1{
  margin-top: 700px;
}
.foot3{
  margin-top: 700px;
}
.foot-content{
  width: 1200px;
  // left: 16.5%;
  margin:0 auto;
  // position: absolute;
  display:flex;
}

.foot-left-content{
  width: 80%;
  display: flex;
  height: 60px;
  line-height: 60px;
}
.foot-red-img{
  width: 56px;
  height: 69px;
  margin-left: 40px;
  margin-top: 16px;
  display: none;
}

.foot-left-content-text{
  margin-top: 30px;
  margin-left: 17px;
  height: 60px;
  p{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    height: 10px;
    line-height: 15px;
  }
}


.foot-right-content{
  width: 20%;
  text-align: right;
  height: 60px;
  line-height: 60px;
}
.foot-jiucuo-img{
  width: 110px;
  height: 55px;
  margin-right: 40px;
  margin-top: 23px;
}
.foot-red-img:hover{
  cursor: pointer;
}
.ba-span:hover{
  cursor: pointer;
}
</style>